<template>
	<view class="content">
		<view class="top-view">
			<view :style="'margin-top: '+statusBarHeight+'px;margin-left: 40rpx;'">
				<u-image
					src="https://dtkj-qnyimg.diankuai.com/%E9%A6%96%E9%A1%B5/%E6%9C%AA%E7%99%BB%E5%BD%95/%E6%8A%96%E7%89%B9.png"
					width="170rpx" height="60rpx" mode="scaleToFill"></u-image>
			</view>
			<!-- <u-navbar :placeholder="true" :bgColor="barTopBg" ref="nbar">
				<view class="u-nav-slot" slot="left">
					<u-image
						src="https://dtkj-qnyimg.diankuai.com/%E9%A6%96%E9%A1%B5/%E6%9C%AA%E7%99%BB%E5%BD%95/%E6%8A%96%E7%89%B9.png"
						width="170rpx" height="60rpx" mode="scaleToFill"></u-image>
				</view>
			</u-navbar> -->
			<view class="slogn-box">
				<text>达人内容营销平台</text>
				<text>让营销变现更简单</text>
			</view>
		</view>
		<view class="mid-view">
			<view class="good-title">
				<text>平台优势</text>
				<view></view>
			</view>

			<view class="good_content-box1" style="margin-top: 60rpx;">
				<image
					src="https://dtkj-qnyimg.diankuai.com/%E9%A6%96%E9%A1%B5/%E6%9C%AA%E7%99%BB%E5%BD%95/%E5%AD%A6%E9%99%A2-%E8%90%A5%E9%94%80%E8%AF%BE%E7%A8%8B2.png"
					class="good_img1"></image>
				<view class="good_content1">
					<view>超强内容引流能力</view>
					<view>垂类流量精准覆盖，粉丝全程营销抵达，用户主动选择截止更高</view>
				</view>
			</view>

			<view class="good_content-box2" style="margin-top: 50rpx;">
				<image
					src="https://dtkj-qnyimg.diankuai.com/%E9%A6%96%E9%A1%B5/%E6%9C%AA%E7%99%BB%E5%BD%95/%E8%B5%84%E6%BA%90%208.png"
					class="good_img2"></image>
				<view class="good_content2">
					<view>海量KOC达人资源</view>
					<view>海量国民内容消费意见领袖，流量真实度高，具有极强投放性价比</view>
				</view>
			</view>

			<view class="good_content-box1" style="margin-top: 60rpx;">
				<image
					src="https://dtkj-qnyimg.diankuai.com/%E9%A6%96%E9%A1%B5/%E6%9C%AA%E7%99%BB%E5%BD%95/%E5%AD%A6%E9%99%A2-%E8%90%A5%E9%94%80%E8%AF%BE%E7%A8%8B2.png"
					class="good_img1"></image>
				<view class="good_content1">
					<view>多维场景效果营销</view>
					<view>支持用户拉新，老客唤醒，线索收集，订单售卖，品牌活动等多种推广场景，满足客户的个性化营销诉求；并接受效果导向，为客户创造真实价值</view>
				</view>
			</view>

			<view class="good_content-box2" style="margin-top: 50rpx;">
				<image
					src="https://dtkj-qnyimg.diankuai.com/%E9%A6%96%E9%A1%B5/%E6%9C%AA%E7%99%BB%E5%BD%95/%E8%B5%84%E6%BA%90%208.png"
					class="good_img2"></image>
				<view class="good_content2">
					<view>优质内容全链触达</view>
					<view>全网幼稚写手入库。自有内容工厂提供内容创意，原创素材全程服务，可根据需求定制跨平台KOC达人矩阵，整合内容投放策略</view>
				</view>
			</view>

			<view class="group-title">
				<text>团长达人入驻流程</text>
				<text>即刻联系，快速接入</text>
			</view>

			<view class="group-content-box">
				<image src="https://dtkj-qnyimg.diankuai.com/%E9%A6%96%E9%A1%B5/%E6%9C%AA%E7%99%BB%E5%BD%95/01.png"
					class="group-img"></image>
				<view class="group-content">
					<view>联系商务</view>
					<view>通过扫一扫右侧微信二维码或者关注“抖特”微信公众号，与商务取得联系，进行合作洽谈</view>
				</view>
			</view>

			<view class="group-content-box">
				<image src="https://dtkj-qnyimg.diankuai.com/%E9%A6%96%E9%A1%B5/%E6%9C%AA%E7%99%BB%E5%BD%95/02.png"
					class="group-img"></image>
				<view class="group-content">
					<view>开通服务</view>
					<view>通过商务同学分享的注册码，完善个人的基本信息，开通“抖特”微信小程序账户</view>
				</view>
			</view>

			<view class="group-content-box">
				<image src="https://dtkj-qnyimg.diankuai.com/%E9%A6%96%E9%A1%B5/%E6%9C%AA%E7%99%BB%E5%BD%95/03.png"
					class="group-img"></image>
				<view class="group-content">
					<view>启动生意</view>
					<view>请通过开通的“抖特”微信小程序账户完善个人账户信息，确认结算政策信息后开启营销推广</view>
				</view>
			</view>

			<view class="circ-title" style="margin-top: 130rpx;">
				<view></view>
				<text>营销产品</text>
			</view>

			<view class="gn-box">
				<image
					src="https://dtkj-qnyimg.diankuai.com/%E9%A6%96%E9%A1%B5/%E6%9C%AA%E7%99%BB%E5%BD%95/%E5%8D%9A%E5%A3%AB.png"
					class="gn-img"></image>
				<view class="gn-content">
					<text>免费知识学堂</text>
					<text style="margin-top: 20rpx;">新手快速入门</text>
					<text>内容营销技巧</text>
					<text>达人成长计划</text>
				</view>
			</view>

			<view class="gn-box">
				<image
					src="https://dtkj-qnyimg.diankuai.com/%E9%A6%96%E9%A1%B5/%E6%9C%AA%E7%99%BB%E5%BD%95/%E5%B9%BF%E5%91%8A%E4%B8%BB%E6%B4%BB%E5%8A%A8%E6%8E%A8%E5%B9%BF.png"
					class="gn-img"></image>
				<view class="gn-content">
					<text>智能推广管理</text>
					<text style="margin-top: 20rpx;">推广过程平台化管理，降低沟通成本\n智能化批量操作功能，提高工作效率</text>
				</view>
			</view>

			<view class="gn-box">
				<image
					src="https://dtkj-qnyimg.diankuai.com/%E9%A6%96%E9%A1%B5/%E6%9C%AA%E7%99%BB%E5%BD%95/38show_%E5%9C%A8%E7%BA%BF%E5%AE%A2%E6%9C%8D_fill.png"
					class="gn-img"></image>
				<view class="gn-content">
					<text>实时消息提醒</text>
					<text style="margin-top: 20rpx;">平台在线消息，传播效率高，精准且时效\n自定义消息管理，避免产生骚扰</text>
				</view>
			</view>

			<view class="gn-box">
				<image
					src="https://dtkj-qnyimg.diankuai.com/%E9%A6%96%E9%A1%B5/%E6%9C%AA%E7%99%BB%E5%BD%95/DVLINK_%E7%BB%93%E7%AE%97%E6%B1%87.png"
					class="gn-img"></image>
				<view class="gn-content">
					<text>平台即时结算</text>
					<text style="margin-top: 20rpx;">结算方式公开透明，平台在线即时结算\n达人总揽全局，实时查看整体收益情况</text>
				</view>
			</view>

			<view class="gn-box">
				<image
					src="https://dtkj-qnyimg.diankuai.com/%E9%A6%96%E9%A1%B5/%E6%9C%AA%E7%99%BB%E5%BD%95/%E6%95%B0%E6%8D%AE%E6%8A%A5%E8%A1%A8.png"
					class="gn-img"></image>
				<view class="gn-content">
					<text>多维数据报表</text>
					<text style="margin-top: 20rpx;">关键词发布期次报表，全流程转化有章可循\n分项目数据报表，效果分析方便快捷\n全平台数据透视表，平台价值清晰可见</text>
				</view>
			</view>

			<view class="gn-box">
				<image
					src="https://dtkj-qnyimg.diankuai.com/%E9%A6%96%E9%A1%B5/%E6%9C%AA%E7%99%BB%E5%BD%95/%E6%9B%B4%E5%A4%9A%E6%9C%8D%E5%8A%A1.png"
					class="gn-img"></image>
				<view class="gn-content">
					<text>敬请期待</text>
					<text style="margin-top: 20rpx;">更多产品功能,正在建设中...\n敬请期待</text>
				</view>
			</view>

			<view class="btm_box">
				<view class="btmBox c_ffffff" style="width: 30%;margin: 0px;font-size: 34rpx;"
					@click="goPage('/pages/webview/webview?tag=getService','navigateTo')">
					<image
						src="https://dtkj-qnyimg.diankuai.com/%E9%A6%96%E9%A1%B5/%E6%9C%AA%E7%99%BB%E5%BD%95/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230107193248.png"
						style="width: 30rpx;height: 30rpx;margin-right: 10rpx;">
						客服
				</view>
				<view class="btmBox c_ffffff" style="width: 65%;margin: 0px;font-size: 34rpx" @click="showPpo">
					立即开通
					<image
						src="https://dtkj-qnyimg.diankuai.com/%E9%A6%96%E9%A1%B5/%E6%9C%AA%E7%99%BB%E5%BD%95/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230107193303.png"
						style="width: 30rpx;height: 30rpx;margin-left: 40rpx;">
				</view>
			</view>
		</view>

		<m-login ref="login" :zIndex="1000000000" @success="loginRes" @error="loginError"></m-login>

		<uni-popup type="center" ref="popup" background-color="#ffffff">
			<view style="height: 400rpx;display: flex;flex-direction: column;justify-content: space-between;">
				<view>
					<view class="popTitle">
						注册
						<view style="position: absolute;right: 10px;" @click="closePop">
							<u-icon name="close" color="#000" size="20px"></u-icon>
						</view>
					</view>
					<u-divider :customStyle="{margin:'0px'}"></u-divider>
				</view>
				<view style="flex: 1;" class="display_col_center">
					<input class="uni-input" type="text" focus placeholder="请输入邀请码" v-model="ivcode"
						style="text-align: center;" />
				</view>
				<view style="display: flex;flex-direction: row;">
					<u-button type="success" text="注册" :customStyle="{flex:1}" @getphonenumber="doLogin"
						openType="getPhoneNumber" color="#C62B2C">
					</u-button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "NormalIndex",
		props: {
			ivcodedf: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				barTopBg: "transparent",
				statusBarHeight: 0,
				ivcode: "",
				userInfo: null
			}
		},
		// options: {
		// 	styleIsolation: 'shared'
		// },
		onLoad() {},
		mounted() {
			let menuButtonObject = uni.getMenuButtonBoundingClientRect();
			this.statusBarHeight = menuButtonObject.top;

			this.ivcode = this.ivcodedf;

			console.log("ivcode", this.ivcode)

			this.userInfo = uni.getStorageSync('UserInfo', null);

			this.checkLogin();
		},
		methods: {
			showPpo(e) {
				if (!this.userInfo.id) {
					this.$refs.login.getOpenId(e);
					this.$refs.popup.open();
				}
			},
			doLogin(e) {
				uni.setStorageSync('ivcode', this.ivcode);
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					this.$refs.login.doLoginByPhone(e);
				}
				this.closePop();
			},
			closePop() {
				this.$refs.popup.close();
			},
			loginRes() {
				const pages = getCurrentPages()
				const curPage = pages[pages.length - 1]
				curPage.onLoad(curPage.options) // 传入参数
				curPage.onShow()
				curPage.onReady()
			},
			loginError(err) {
				// this.ivcode = '';
				uni.setStorageSync('ivcode', this.ivcode);
				if (err.code == 0 && err.info == "请注册！") {
					this.isRegister = true;
					// uni.showToast({
					// 	icon: 'none',
					// 	title: '未注册！',
					// 	duration: 2000
					// });
					// this.showPpo();
				}
			},
			checkLogin() {
				this.$refs.login.checkLogin();
			},
			goPage(page, type) {
				uni.$u.route({
					url: page,
					type: type
				})
			},
			onPageScroll: function(e) {
				if (e.scrollTop == 0) {
					this.barTopBg = "transparent";
				} else if (e.scrollTop >= 40) {
					this.barTopBg = "#B52A2B";
				}
			},
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: rgb(19, 31, 79);
	}

	.top-view {
		width: 100%;
		background: url('https://dtkj-qnyimg.diankuai.com/%E9%82%80%E8%AF%B7%E9%A1%B5%E9%9D%A2/%E5%9B%BE%E5%B1%82%201.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		height: 650rpx;
		background-size: 100% 100%;
	}

	.mid-view {
		width: 100%;
		background-color: rgb(19, 31, 79);
		padding-bottom: 120rpx;
	}

	.logo1 {
		width: 60rpx;
		height: 60rpx;
	}

	.app_name {
		width: 80rpx;
		height: 40rpx;
		margin-left: 10rpx;
	}

	.top-img {
		padding: 40rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.share-view {
		height: 64rpx;
	}

	.share-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 130rpx;
		padding: 2rpx 10rpx 2rpx 2rpx;
		position: absolute;
		right: 0;
		background-color: #fff;
		border-top-left-radius: 30rpx;
		border-bottom-left-radius: 30rpx;
	}

	.share-box>text {
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.share-view {
		position: relative;
	}

	.slogn-box {
		color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 160rpx;
	}

	.slogn-box>text:first-child {
		font-size: 60rpx;
		font-family: FZZhengHeiS-EB-GB;
		font-weight: 700;
	}

	.slogn-box>text:last-child {
		font-size: 40rpx;
		font-family: FZZhengHeiS-EB-GB;
		margin-top: 30rpx;
		font-weight: 700;
	}

	.about-box {
		width: 90%;
		box-sizing: border-box;
		margin-left: 5%;
		margin-top: -130rpx;
		color: #fff;
	}

	.about-title-box {
		background-color: rgb(198, 43, 44);
		text-align: center;
		padding: 20rpx;
		font-weight: 600;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
	}

	.about-title-content {
		background-image: linear-gradient(to right, rgb(177, 57, 78), rgb(247, 126, 93));
		border-bottom-left-radius: 30rpx;
		border-bottom-right-radius: 30rpx;
		border-bottom: 2px solid rgb(189, 81, 90);
		border-left: 2px solid rgb(189, 81, 90);
		border-right: 2px solid rgb(189, 81, 90);
		padding: 20rpx;
		font-size: 30rpx;
	}

	.good-title {
		position: relative;
		padding-left: 5%;
		margin-top: 56rpx;
		box-sizing: border-box;
	}

	.good-title>text {
		color: #fff;
		font-size: 38rpx;
		font-weight: 600;
	}

	.good-title>view {
		background-color: rgba(198, 43, 44, 0.6);
		width: 100rpx;
		height: 10rpx;
		border-radius: 10rpx;
		margin-top: -10rpx;
	}

	.good_content-box1 {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
		box-sizing: border-box;
		padding: 0 5%;
		color: #fff;
	}

	.good_img1 {
		width: 104rpx;
		height: 104rpx;
		min-width: 104rpx;
	}

	.good_content1 {
		display: flex;
		flex-direction: column;
		margin-left: 10rpx;
	}

	.good_content1>view:first-child {
		font-size: 38rpx;
		font-weight: 600;
	}

	.good_content1>view:last-child {
		margin-left: 20rpx;
		font-size: 30rpx;
	}

	.good_content-box2 {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
		box-sizing: border-box;
		padding: 0 5%;
		color: #fff;
		padding-left: 20%;
	}

	.good_img2 {
		width: 104rpx;
		height: 104rpx;
		min-width: 104rpx;
	}

	.good_content2 {
		display: flex;
		flex-direction: column;
		margin-left: 10rpx;
	}

	.good_content2>view:first-child {
		font-size: 38rpx;
		font-weight: 600;
	}

	.good_content2>view:last-child {
		margin-left: 20rpx;
		font-size: 30rpx;
	}

	.group-title {
		color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 70rpx;
	}

	.group-title>text:first-child {
		font-size: 60rpx;
		font-family: FZZhengHeiS-EB-GB;
		font-weight: 700;
	}

	.group-title>text:last-child {
		font-size: 34rpx;
		font-family: FZZhengHeiS-EB-GB;
		margin-top: 20rpx;
	}

	.group-content-box {
		margin-top: 65rpx;
		color: #fff;
		width: 90%;
		box-sizing: border-box;
		margin-left: 5%;
	}

	.group-img {
		width: 116rpx;
		height: 121rpx;
		margin-left: 60rpx;
	}

	.group-content {
		background-image: linear-gradient(to right, rgb(191, 156, 244), rgb(80, 102, 238));
		border-top-left-radius: 60rpx;
		border-top-right-radius: 60rpx;
		border-bottom-left-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
		padding: 20rpx 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: -20rpx;
		height: 260rpx;
	}

	.group-content>view:first-child {
		font-size: 40rpx;
		font-weight: 400;
		margin-bottom: 20rpx;
	}

	.group-content>view:last-child {
		font-size: 34rpx;
		margin-bottom: 20rpx;
	}

	.circ-title {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		margin-left: 8%;
		box-sizing: border-box;
	}

	.circ-title>view {
		min-height: 80rpx;
		min-width: 80rpx;
		border-radius: 50rpx;
		background-image: linear-gradient(to right, rgb(19, 31, 79), rgb(71, 98, 202));
	}

	.circ-title>text {
		color: #fff;
		font-size: 40rpx;
		font-weight: 500;
		margin-left: -40rpx;
	}

	.gn-box {
		background-image: linear-gradient(to right, rgb(191, 156, 244), rgb(80, 102, 238));
		width: 84%;
		box-sizing: border-box;
		margin-left: 8%;
		border-radius: 30rpx;
		padding: 20rpx;
		display: flex;
		flex-direction: row;
		margin-top: 30rpx;
		min-height: 240rpx;
	}

	.gn-img {
		max-width: 64rpx;
		height: 64rpx;
	}

	.gn-content {
		display: flex;
		flex-direction: column;
		color: #fff;
		margin-left: 40rpx;
	}

	.gn-content>text:first-child {
		font-size: 40rpx;
		font-weight: 500;
	}

	.gn-content>text {
		font-size: 28rpx;
	}

	.btm_box {
		width: 84%;
		margin-left: 8%;
		position: fixed;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		bottom: 100px;
		z-index: 100;
	}

	.popTitle {
		font-size: 40rpx;
		font-weight: 600;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
</style>
